<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="alert alert-primary">
                    <p>
                        <b>设置说明</b>
                    </p>
                    <p>
                        绑定QQ邮箱，获取售货机的重力传感器的错误信息
                    </p>
                </div>
                <div v-if="!setIsShow" class="setbox">
                    <el-tabs v-model="activeName" class="demo-tabs">
                        <el-tab-pane label="报错绑定邮箱" name="first">
                            <el-button type="primary" style="margin-bottom: 10px;" @click="addEamil">添加QQ邮箱</el-button>
                            <div class="erremail-table">
                                <el-table v-loading="loading" :data="list.errEmailsKey" style="width: 100%;height: 400px;"
                                    :header-cell-style="{ background: '#44abf7', color: '#fff', fontSize: '14px', height: '40px', letterSpacing: '2px' }"
                                    border>
                                    <el-table-column prop="userName" label="邮箱号" align="center">
                                        <template #default="{ row }">
                                            <div v-show="!row.showmode" class="emails-name">{{ row.userName }}</div>
                                            <el-input v-show="row.showmode" v-model.trim="row.userName" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="passWord" label="密码" align="center">
                                        <template #default="{ row }">
                                            <div v-show="!row.showmode" class="emails-name">{{ row.passWord }}</div>
                                            <el-input v-show="row.showmode" v-model.trim="row.passWord" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template #default="{ row }">
                                            <div v-show="!row.showbtn">
                                                <el-button type="primary" @click="editConfigClick(row)">编辑</el-button>
                                                <el-button type="danger" @click="cancelClick(row)">删除</el-button>
                                            </div>
                                            <div v-show="row.showbtn">
                                                <el-button type="warning" @click="saveClick(row)">保存</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="tab-footer">
                                    <el-button type="primary" v-if="!setIsShow" @click="EamilOnSubmit">提交</el-button>
                                </div>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="APP版本" name="second">
                            <el-form :model="list.configKey" label-width="120px">
                                <el-form-item label="url: ">
                                    <span><a :href="list.configKey.url" class="appUrl">{{ list.configKey.url }}</a></span>
                                </el-form-item>
                                <el-form-item label="版本：">
                                    <span>{{ list.configKey.widgetInfo }}</span>
                                </el-form-item>
                                <el-form-item label="是否强制更新" prop="userName" style="align-items: center;">
                                    <el-radio-group v-model="list.configKey.force" class="ml-4">
                                        <el-radio label="1" size="large">是</el-radio>
                                        <el-radio label="2" size="large">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <div>
                                        <el-button type="primary"
                                            @click="editAppVisionClick(list.configKey, 1)">修改</el-button>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="androidAPP版本" name="third">
                            <el-form :model="list.androidKey" label-width="120px">
                                <el-form-item label="url: ">
                                    <span><a :href="list.androidKey.url" class="appUrl">{{ list.androidKey.url }}</a></span>
                                </el-form-item>
                                <el-form-item label="版本：">
                                    <span>{{ list.androidKey.widgetInfo }}</span>
                                </el-form-item>
                                <el-form-item label="是否强制更新" prop="userName" style="align-items: center;">
                                    <el-radio-group v-model="list.androidKey.force" class="ml-4">
                                        <el-radio label="1" size="large">是</el-radio>
                                        <el-radio label="2" size="large">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <div>
                                        <el-button type="primary"
                                            @click="editAppVisionClick(list.androidKey, 2)">编辑</el-button>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="androidAPP配置" name="fourth">
                            <el-form :model="list.androidConfig" label-width="120px">
                                <el-form-item label="广告视频 : " prop="videoUrl">
                                    <span><a :href="list.androidConfig.videoUrl" class="appUrl">{{
                                        list.androidConfig.videoUrl
                                    }}</a></span>
                                </el-form-item>
                                <el-form-item label="是否录制视频" prop="is_record" style="align-items: center;">
                                    <el-radio-group v-model="list.androidConfig.is_record" class="ml-4">
                                        <el-radio label="1" size="large">是</el-radio>
                                        <el-radio label="2" size="large">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item>
                                    <div>
                                        <el-button type="primary"
                                            @click="eidtAndroidConfig(list.androidConfig)">编辑</el-button>
                                    </div>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <el-dialog v-model="dialogAppVisionVisible" :title="title" width="40%">
                    <el-form :model="vision" label-width="100px">
                        <el-form-item label="url：" prop="userName">
                            <el-input v-model="vision.url" placeholder="url" />
                        </el-form-item>
                        <el-form-item label="版本：" prop="passWord">
                            <el-input v-model="vision.widgetInfo" placeholder="版本" />
                        </el-form-item>
                        <el-form-item label="是否强制更新" prop="userName" style="align-items: center;">
                            <el-radio-group v-model="vision.force" class="ml-4">
                                <el-radio label="1" size="large">是</el-radio>
                                <el-radio label="2" size="large">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogAppVisionVisible = false">取消</el-button>
                            <el-button type="primary" @click="editAPPClick()">
                                确定
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
                <el-dialog v-model="dialogAppConfigVisible" :title="title" width="40%">
                    <el-form :model="config" label-width="120px">
                        <el-form-item label="广告视频 : " prop="videoUrl">
                            <el-input v-model="config.videoUrl" placeholder="url" />
                        </el-form-item>
                        <el-form-item label="是否录制视频" prop="is_record" style="align-items: center;">
                            <el-radio-group v-model="config.is_record" class="ml-4">
                                <el-radio label="1" size="large">是</el-radio>
                                <el-radio label="2" size="large">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogAppConfigVisible = false">取消</el-button>
                            <el-button type="primary" @click="androidConfigClick()">
                                确定
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { Config, setConfig } from '@/api/system/set'
import { ElMessage } from 'element-plus'
import { ref, reactive, onBeforeMount } from 'vue'
import _ from 'lodash'
const route = useRoute()
const routes = ref()
const activeName = ref('first')
const dialogAppVisionVisible = ref(false)
const dialogAppConfigVisible = ref(false)
const tbsts = ref()
const loading = ref(true)
const form = reactive({
    userName: '',
    passWord: ''
})
const vision = reactive({
    url: '',
    widgetInfo: '',
    force: ''
})
const config = reactive({
    videoUrl: '',
    is_record: ''
})
const list = reactive({
    configKey: [
        {
            url: '',
            widgetInfo: ''
        }
    ],
    errEmailsKey: [
        {
            userName: '',
            passWord: ''
        }
    ],
    androidKey: [
        {
            url: '',
            widgetInfo: ''
        }
    ],
    androidConfig: [
        {
            is_record: '1',
            videoUrl: ''
        }
    ]
})
const errorShow = ref(false)
const setIsShow = ref(false)
const title = ref('')

onBeforeMount(() => {
    routes.value = route.matched
    getSetList()
})
const getSetList = async () => {
    await Config().then(res => {
        const { code, data } = res
        if (code == 201) {
            errorShow.value = true
            loading.value = false
            list.configKey = []
        } else if (code == 200) {
            list.configKey = data
            loading.value = false
            list.configKey.forEach(element => {
                if (element.key == 'appVersion') {
                    if (element.value.force === true) {
                        element.value.force = '1'
                    } else {
                        element.value.force = '2'
                    }
                    list.configKey = element.value
                } else if (element.key == 'errEmails') {
                    list.errEmailsKey = element.value
                } else if (element.key == 'androidVersion') {
                    if (element.value.force === true) {
                        element.value.force = '1'
                    } else {
                        element.value.force = '2'
                    }
                    list.androidKey = element.value
                } else if (element.key == 'androidConfig') {
                    if (element.value.is_record === true) {
                        element.value.is_record = '1'
                    } else {
                        element.value.is_record = '2'
                    }
                    list.androidConfig = element.value
                }
            });
        }

    }).catch((err) => {
        loading.value = false
    })
}
const editConfigClick = (item) => {
    tbsts.value = 'xg'
    btngroupChange(tbsts.value, item)
}
function btngroupChange(tbstsvalue, scope1) {
    if (tbstsvalue == "xg") {
        scope1.showmode = true
        // 使按钮组显示为 保存/取消 按钮
        scope1.showbtn = true
    } else if (tbstsvalue == "fxg") {
        // 使修改项显示为false（变为不可修改状态）
        scope1.showmode = false
        // 使按钮组显示为 编辑/取消 按钮
        scope1.showbtn = false
    }
}
const saveClick = (row) => {
    row.showmode = false
    row.showbtn = false
}
const cancelClick = (row) => {
    let data = list.errEmailsKey.filter(item => {
        return item.userName != row.userName && item.passWord != row.passWord
    })
    ElMessageBox.confirm(
        '确定删除此项',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await setConfig({ errEmails: data }).then(res => {
            const { code, data } = res
            if (code == 200) {
                getSetList()
            }
        })
    }).catch(() => {
    })
}
const EamilOnSubmit = () => {
    let obj = list.errEmailsKey.map(item => {
        return {
            userName: item.userName,
            passWord: item.passWord
        }
    })
    let query = obj.filter(item => {
        return item.userName != '' && item.passWord != ''
    })
    setConfig({ errEmails: query }).then(res => {
        const { code, data } = res
        if (code == 200) {
            ElMessage.success('添加成功')
            getSetList()
        }
    })
}
const editAppVisionClick = (list, num) => {
    dialogAppVisionVisible.value = true
    if (num == 2) {
        title.value = '安卓APP版本修改'
        vision.url = list.url
        vision.widgetInfo = list.widgetInfo
        vision.force = list.force
    } else if (num == 1) {
        title.value = 'APP版本修改'
        vision.url = list.url
        vision.widgetInfo = list.widgetInfo
        vision.force = list.force
    }
}
const eidtAndroidConfig = (list) => {
    dialogAppConfigVisible.value = true
    title.value = '安卓APP版本修改'
    config.videoUrl = list.videoUrl
    config.is_record = list.is_record
}
const editAPPClick = async () => {
    let keyList = JSON.parse(JSON.stringify(vision))
    if (keyList.force == '1') {
        keyList.force = true
    } else if (keyList.force == '2') {
        keyList.force = false
    }
    if (title.value == '安卓APP版本修改') {
        await setConfig({ androidVersion: keyList }).then(res => {
            const { code, data } = res
            if (code == 200) {
                ElMessage.success('修改成功')
                dialogAppVisionVisible.value = false
                getSetList()
            }

        })
    } else if (title.value == 'APP版本修改') {
        await setConfig({ appVersion: keyList }).then(res => {
            const { code, data } = res
            if (code == 200) {
                ElMessage.success('修改成功')
                dialogAppVisionVisible.value = false
                getSetList()
            }
        })
    }
}
//添加邮箱
const addEamil = () => {
    list.errEmailsKey.push({
        userName: '',
        passWord: ''
    })
}
//编辑安卓配置
const androidConfigClick = () => {
    let configList = _.clone(config)
    if (configList.is_record == '1') {
        configList.is_record = true
    } else if (configList.is_record == '2') {
        configList.is_record = false
    }
    setConfig({ androidConfig: configList }).then(s => {
        const { code, data } = s
        if (code == 200) {
            ElMessage.success('修改成功')
            dialogAppConfigVisible.value = false
            getSetList()
        }
    })
}
</script>

<style lang="less" scoped>
.page-content {
    height: 750px;
}

.err-container {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.error {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;

    img {
        width: 100%;
        height: 100%;
        font-size: 100%;
    }
}

.error-text {
    font-size: 24px;
    margin-top: 20px;
}

.demo-tabs {
    padding: 20px 60px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.configBtn {
    line-height: 50px;
    border-bottom: 1px solid #f0f0f0;
}

.isSet {
    padding: 20px 10px;
}

.setConfig {
    background: #f8f8f8;
    margin-bottom: 10px;
    padding: 0 10px;
}

.setConfig .title {
    text-align: center;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    padding: 20px 0;
}

.setConfig .setConfig-form {
    border-left: 3px solid #fff;
    padding: 10px 10px;
}


.appUrl {
    text-decoration: underline;
    color: #509eff;
}

.setbox {
    border: 1px solid #f0f0f0;
    margin-top: 20px;
    margin-bottom: 10px;
    height: 600px;
}

.emails-name {
    margin: 10px;
}

.tab-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;

    .el-input {
        margin-right: 40px;
    }
}

:deep(.el-dialog) {
    header {
        background: rgb(68, 171, 247);
        margin-right: 0;

        .el-dialog__title {
            color: #fff;
        }

        .el-dialog__headerbtn i {
            color: #fff;
        }
    }
}

:deep(.el-dialog__close) {
    color: #fff;
}
</style> 
